 body {
   background: black;
 }

 .wrap {
   width: 200px;
   margin: 100px auto;
   position: relative;
   transform-style: preserve-3d;
   perspective: 3000px;
   /*最后才加上去*/
   animation: rotateView 10s 4s infinite alternate;
 }

 /*最后才加上去*/
 @keyframes rotateView {
   from {
     transform: rotateY(0) rotateX(0);
   }

   to {
     transform: rotateY(-360deg) rotateX(-35deg)
   }
 }

 .wrap div {
   width: 200px;
   height: 300px;
   position: absolute;
   /*
    *1. direction 定义方向，取值包括 above 、 below 、 left 、 right。
		* 2. offset定义反射偏移的距离，
		* 3. mask-box-image定义遮罩图像
  */
   -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
 }

 /*第四个值为阴影的大小，越大，阴影就越大*/
 .wrap div img {
   width: 220px;
   height: 600px;
   transition: 0.5s;
   box-shadow: 0px 0px 10px 1px white
 }

 .wrap div:nth-child(9) {
   animation: has_rotate9 0.5s forwards;
 }

 @keyframes has_rotate9 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(400deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(8) {
   animation: has_rotate8 0.5s 0.5s forwards;
 }

 @keyframes has_rotate8 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(440deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(7) {
   animation: has_rotate7 0.5s 1s forwards;
 }

 @keyframes has_rotate7 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(480deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(6) {
   animation: has_rotate6 0.5s 1.5s forwards;
 }

 @keyframes has_rotate6 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(520deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(5) {
   animation: has_rotate5 0.5s 2s forwards;
 }

 @keyframes has_rotate5 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(560deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(4) {
   animation: has_rotate4 0.5s 2.5s forwards;
 }

 @keyframes has_rotate4 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(600deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(3) {
   animation: has_rotate3 0.5s 3s forwards;
 }

 @keyframes has_rotate3 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(640deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(2) {
   animation: has_rotate2 0.5s 3.5s forwards;
 }

 @keyframes has_rotate2 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(680deg) translateZ(380px);
   }
 }

 .wrap div:nth-child(1) {
   animation: has_rotate1 0.5s 4s forwards;
 }

 @keyframes has_rotate1 {
   from {
     transform: rotateY(0deg) translateZ(0px);
   }

   to {
     transform: rotateY(720deg) translateZ(380px);
   }
 }